@for $i from 1 through 10 {
  .h-#{$i}00 {
    height: $i * 100px;
  }
}

@each $i in 0, 5, 10 {
  $unit: $i + px;
  .mg-#{$i} {
    margin: $unit;
  }
  .mt-#{$i} {
    margin-top: $unit;
  }
  .mb-#{$i} {
    margin-bottom: $unit;
  }
  .ml-#{$i} {
    margin-left: $unit;
  }
  .mr-#{$i} {
    margin-right: $unit;
  }
}

.fill-w {
  width: 100%;
}

.text-right,
.tr {
  text-align: right;
}
.text-center,
.tc {
  text-align: center;
}

.margin,
.mg {
  margin: 0;
}

.margin-5,
.mg-5 {
  margin: 5px;
}

h1 {
  text-align: center;
}

.scroll-no {
  overflow: hidden;
}
.scroll-x {
  overflow: auto hidden;
}
.scroll-y {
  overflow: hidden auto;
}
